<template>
    <div class="nav-container" v-if="navShow">
        <img src="../../assets/images/common/com_location.png" alt="">
        您当前的位置：首页>
        <span class="path-name">{{pathName}}</span>
    </div>
</template>

<script>
    export default {
        name: "MainNavigation",
        data(){
            return {
                navShow: true,
                pathName: '',
            }
        },
        watch:{
            $route(to,from){
                this.navShow = this.$route.path !== '/Home';
                this.pathName = this.$route.meta.title;
            },
            goPage(name){
                this.$router.push({name: name})
            }
        },
        mounted() {
            this.navShow = this.$route.path !== '/Home';
            this.pathName = this.$route.meta.title
        }
    }
</script>

<style scoped lang="less">
    .nav-container {
        margin: 0 auto;
        padding-left: 19px;
        width: @container-width;
        height: 72px;
        line-height: 72px;
        font-size: 15px;
        color: #3F3F3F;
        text-align: left;
        position: relative;
        img {
            position: absolute;
            left: 0;
            top: 28px;
        }
        .nav-icon {
            color: @main-color;
        }
        .path-name {
            font-size: 16px;
            color: @main-color;
        }
    }
</style>